jQuery Mobile: Einfach mobile Web-Apps entwickeln
()
Über dieses E-Book
Anhand geeigneter und getesteter Beispiele wird dem Leser die Funktionsweise und Vielschichtigkeit des Frameworks vermittelt. Schritt für Schritt werden ihm Werkzeuge an die Hand gegeben, um eigene Anwendungen mit jQuery Mobile zu entwickeln. Im Verlauf des Buches werden aufbauend auf den Grundlagen auch komplexere Themen wie Responsive Design im Kontext des Frameworks angesprochen und komplexere Widgets eingeführt. Das Erstellen eigener Farbschemata wird ebenso behandelt wie das Nachladen von Seiteninhalten über AJAX. Das im Verlauf des Buchs aufgebaute Wissen über das Framework jQuery Mobile wird durch die Ausführungen zu Unit Tests und testgetriebener Entwicklung im Kontext von jQuery Mobile abgerundet.
Ähnlich wie jQuery Mobile
Ähnliche E-Books
jQuery Mobile - Basics: Basics Bewertung: 0 von 5 Sternen0 BewertungenWicket: Komponentenbasiert und objektorientiert - das alternative Java-Webframework Bewertung: 0 von 5 Sternen0 BewertungenJavaScript für Java-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenjQuery Mobile: Unit Testing Bewertung: 0 von 5 Sternen0 BewertungenJavaScript und TypeScript für C#-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenModularisierung mit Java 9: Grundlagen und Techniken für langlebige Softwarearchitekturen Bewertung: 0 von 5 Sternen0 BewertungenOpenLaszlo: schnell + kompakt Bewertung: 0 von 5 Sternen0 BewertungenWorkshop Java EE 7: Ein praktischer Einstieg in die Java Enterprise Edition mit dem Web Profile Bewertung: 0 von 5 Sternen0 BewertungenSingle-Page-Web-Apps: JavaScript im Einsatz: Webseiten erstellen mit AngularJS, Meteor und jQuery Mobile Bewertung: 0 von 5 Sternen0 BewertungenJavaScript für Enterprise-Entwickler: Professionell programmieren im Browser und auf dem Server Bewertung: 0 von 5 Sternen0 BewertungenCross-Plattform-Entwicklung mit HTML und JavaScript Bewertung: 0 von 5 Sternen0 BewertungenDurchstarten mit React: Web-Apps einfach und modular entwickeln Bewertung: 0 von 5 Sternen0 BewertungenReact Native: Native Apps parallel für Android und iOS entwickeln Bewertung: 0 von 5 Sternen0 BewertungenNebenläufige Programmierung mit Java: Konzepte und Programmiermodelle für Multicore-Systeme Bewertung: 0 von 5 Sternen0 BewertungenAndroid mit Kotlin – kurz & gut: Inklusive Android 8 und Android Studio 3.0 Bewertung: 0 von 5 Sternen0 BewertungenModerne Datenzugriffslösungen mit Entity Framework 6 Bewertung: 0 von 5 Sternen0 BewertungenHTML5, JavaScript und jQuery: Der Crashkurs für Softwareentwickler Bewertung: 2 von 5 Sternen2/5Kompakteinstieg: Continuous Integration mit Jenkins Bewertung: 0 von 5 Sternen0 BewertungenAndroid Schnelleinstieg Bewertung: 0 von 5 Sternen0 BewertungenJavaFX Rendering & 3D Bewertung: 0 von 5 Sternen0 BewertungenErfahrungen mit Eclipse 4: aus der Praxis für die Praxis Bewertung: 0 von 5 Sternen0 BewertungenSilverlight 2.0: schnell + kompakt Bewertung: 0 von 5 Sternen0 BewertungenJava 9 – Die Neuerungen: Syntax- und API-Erweiterungen und Modularisierung im Überblick Bewertung: 0 von 5 Sternen0 BewertungenApps mit Azure Bewertung: 0 von 5 Sternen0 BewertungenVue.js kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenMobile Web-Apps mit JavaScript: Leitfaden für die professionelle Entwicklung Bewertung: 0 von 5 Sternen0 BewertungenJoomla!-Extensions entwickeln: Eigene Komponenten, Module und Plugins programmieren Bewertung: 0 von 5 Sternen0 BewertungenSoftware modular bauen: Architektur von langlebigen Softwaresystemen - Grundlagen und Anwendung mit OSGi und Java Bewertung: 0 von 5 Sternen0 Bewertungen.NET-Praxis: Tipps und Tricks zu .NET und Visual Studio Bewertung: 0 von 5 Sternen0 Bewertungen
Programmieren für Sie
Algorithmen: Grundlagen und Implementierung Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren von Kopf bis Fuß Bewertung: 4 von 5 Sternen4/5Programmieren für Einsteiger: Teil 1 Bewertung: 0 von 5 Sternen0 BewertungenJavaScript kurz & gut Bewertung: 3 von 5 Sternen3/5Python kurz & gut: Für Python 3.x und 2.7 Bewertung: 3 von 5 Sternen3/5Programmieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 BewertungenSQL von Kopf bis Fuß Bewertung: 4 von 5 Sternen4/5Programmieren für Einsteiger: Teil 2 Bewertung: 0 von 5 Sternen0 BewertungenC++: Eine kompakte Einführung Bewertung: 0 von 5 Sternen0 BewertungenPython | Schritt für Schritt Programmieren lernen: Der ultimative Anfänger Guide für einen einfachen & schnellen Einstieg Bewertung: 0 von 5 Sternen0 BewertungenHacken mit Python und Kali-Linux: Entwicklung eigener Hackingtools mit Python unter Kali-Linux Bewertung: 0 von 5 Sternen0 BewertungenGit kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenDas große Python3 Workbook: Mit vielen Beispielen und Übungen - Programmieren leicht gemacht! Bewertung: 4 von 5 Sternen4/5Arduino: Ein schneller Einstieg in die Microcontroller-Entwicklung Bewertung: 5 von 5 Sternen5/5Mikrocontroller in der Elektronik: Mikrocontroller programmieren und in der Praxis einsetzen Bewertung: 0 von 5 Sternen0 BewertungenEigene Spiele programmieren – Python lernen: Der spielerische Weg zur Programmiersprache Bewertung: 0 von 5 Sternen0 BewertungenWeniger schlecht programmieren Bewertung: 4 von 5 Sternen4/5Linux Grundlagen - Ein Einstieg in das Linux-Betriebssystem Bewertung: 0 von 5 Sternen0 BewertungenC von Kopf bis Fuß Bewertung: 3 von 5 Sternen3/5Microsoft Word 2016 (Microsoft Press): Einfache Anleitungen für wichtige Aufgaben Bewertung: 0 von 5 Sternen0 BewertungenSQL – kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenAndroid-Programmierung kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenRaspberry Pi: Mach's einfach: Die kompakteste Gebrauchsanweisung mit 222 Anleitungen. Geeignet für Raspberry Pi 3 Modell B / B+ Bewertung: 0 von 5 Sternen0 BewertungenLinux Befehlsreferenz: Schnelleinstieg in die Arbeit mit der Konsole, regulären Ausdrücken und Shellscripting Bewertung: 0 von 5 Sternen0 BewertungenPowerShell: Anwendung und effektive Nutzung Bewertung: 5 von 5 Sternen5/5HTML5-Programmierung von Kopf bis Fuß: Webanwendungen mit HTML5 und JavaScript Bewertung: 0 von 5 Sternen0 BewertungenPython-Grundlagen Bewertung: 0 von 5 Sternen0 BewertungenJavaScript kinderleicht!: Einfach programmieren lernen mit der Sprache des Web Bewertung: 0 von 5 Sternen0 BewertungenDas Franzis Starterpaket Arduino Mega 2560: Das Handbuch für den Schnelleinstieg Bewertung: 0 von 5 Sternen0 Bewertungen
Rezensionen für jQuery Mobile
0 Bewertungen0 Rezensionen
Buchvorschau
jQuery Mobile - Marco Dierenfeldt
Franca!
1 Einführung in jQuery Mobile
1.1 Was ist jQuery Mobile?
Wenn man sich die beiden Bestandteile des Namens „jQuery und „Mobile
einmal getrennt ansieht, wird ziemlich schnell deutlich, worum es sich bei jQuery Mobile handelt. jQuery benötigt vermutlich keine gesonderte Vorstellung, es ist eines der bekanntesten JavaScript-Frameworks und jedem Entwickler von Webseiten, bewusst oder unbewusst, schon einmal begegnet. Falls Sie mit jQuery nichts anfangen können, oder es zwar dem Namen nach kennen, es aber noch nie aktiv verwendet haben, müssen Sie jetzt nicht verzweifeln. jQuery Mobile verwendet zwar jQuery, aber an den Stellen in diesem Buch, an denen wir es bewusst einsetzen, werden die verwendeten Teile erklärt.
„Mobile" ist eines der Schlagwörter unserer Zeit. Alles muss heutzutage mobil sein, auch Webseiten, und mehr noch die Webapplikationen. jQuery Mobile unterstützt Sie also als JavaScript-Framework bei der Entwicklung von mobilen Webapplikationen.
Wozu benötigt man mobile Webapplikationen oder gar ein eigenes Framework dafür? Diese Frage ist berechtigt, gibt es doch eine unermessliche Flut an Apps für alle mobilen Plattformen. Da haben wir aber auch schon eine mögliche Antwort: Die Vielzahl der Applikationsplattformen. Schon wenn wir uns allein auf die beiden führenden Plattformen (iOS und Android) beschränken würden, hätten wir dennoch eine sehr große Vielfalt an Endgeräten mit unterschiedlichsten Auflösungen, Farbtiefen, UI-Elementen und Bedienkonzepten.
Was alle diese Endgeräte gemein haben, ist ein Browser, der Webseiten (und damit auch Webapplikationen) verarbeiten kann. Hier ist der Ansatzpunkt für mobile Webseiten und Webapplikationen. jQuery Mobile ist nicht das einzige Framework für mobile Webanwendungen, es ist nur eines unter vielen, aber durch seine leicht verständliche Funktionsweise und saubere Trennung zwischen UI und Funktion eines der beliebtesten.
jQuery Mobile bietet durch seine „klassenbasierte Unterstützung von Browsern"(Graded Browser Support)die Möglichkeit, die Anwendungen auf einer Vielzahl von Endgeräten zur Verfügung zu stellen. So werden in jQuery Mobile drei unterschiedliche Klassen von Endgeräten/Browsern definiert. In Abbildung 1.1 sehen Sie eine Übersicht dieser Klassen.
Abbildung 1.1: Klassen der Browserunterstützung in jQuery Mobile
Klasse A ist die höchstmögliche Klasse, sie bietet alle Features von jQuery Mobile, inklusive animierter Seitenwechsel, AJAX und HTML5-Erweiterungen. In dieser Klasse befinden sich annähernd alle modernen Smartphones, Smartphone- und Desktopbrowser.
Klasse B verzichtet auf AJAX-Navigationsfeatures, benutzt aber weiterhin die HTML5-Erweiterungen und das CSS-Layout. Sie beinhaltet ein paar ältere Smartphone-Plattformen.
Klasse C letztlich verzichtet auf das CSS-Layout, auf AJAX und HTML5-Erweiterungen und stellt den Inhalt in klassischer Weboptik dar. In dieser Kategorie befinden sich vor allem ältere Feature Phones. Eine komplette Liste finden Sie unter: http://jquerymobile.com/gbs/
1.2 Getting Started
Im Folgenden werden wir die Grundlagen für die Entwicklung von Anwendungen mit jQuery Mobile und JavaScript schaffen. Wir werden uns die Themen Entwicklungsumgebung, Browser und benötigte Frameworks/Frameworkdateien ansehen.
Entwicklungsumgebung
Wie in vielen anderen Publikationen zum Thema JavaScript, auch hier der Hinweis, dass man zum Entwickeln von Webapplikationen nicht unbedingt eine Entwicklungsumgebung benötigt und auch ein normaler Texteditor ausreichen würde. Allerdings sprechen viele Gründe für ein IDE (Integrated Development Environment). Man bekommt nicht nur Syntax-Highlighting für HTML und JavaScript, sondern in der Regel auch Unterstützung in Dingen wie Projektaufbau und Debugging-Tools. Meine derzeit favorisierte Entwicklungsumgebung ist NetBeans, das unter http://www.netbeans.org heruntergeladen werden kann. Den Quellcode zu diesem Buch habe ich mit Version 7.4 entwickelt.
Browser
Da wir mobile Apps für das Web entwickeln wollen, benötigen wir auf unserem Entwicklungsrechner zumindest einen Browser. Im Prinzip ist der gewählte Browser gleichgültig, wenn man jedoch das JavaScript-Debugging-Feature von NetBeans nutzen möchte, muss man Google Chrome installiert haben. Hierfür verwende ich Chrome in der Version 32.0.1700.102m.
Frameworks
Wie wir in Kapitel 1.1 erfahren haben, benötigt jQuery Mobile, um korrekt arbeiten zu können, jQuery. Dieses Framework kann man unter http://www.jquery.com herunterladen. Es gibt zwei unterschiedliche Downloads, eine „minifizierte"(engl. minified) und eine normale Variante des Frameworks. Dies ist für JavaScript-Frameworks üblich, zumindest dann, wenn es sich um freien Quellcode handelt wie hier.
Die „minifizierte" Datei ist für den produktiven Einsatz gedacht, doch da sie auf möglichst geringe Größe gebracht wurde, ist sie zum Entwickeln und ggf. zur Fehlersuche nicht so gut geeignet. Die andere Variante ist im Klartext und gut lesbar formatiert, sodass man beim Debuggen auch die Entwicklerkommentare und die Funktionsweise der Bibliothek nachvollziehen kann.
Das Framework wird in zwei Varianten zur Verfügung gestellt, einer Version 1.x.y und einer 2.x. Diese unterscheiden sich darin, dass sie unterschiedliche Browserversionen unterstützen. Version 2.x unterstützt lediglich aktuelle Browser, wohingegen Version 1.x.y auch ältere Browser wie beispielsweise Internet Explorer 6 unterstützt. Um möglichst viele Browser zu unterstützen, verwende ich für dieses Buch die Version 1.10.2.
Das Kernframework ist natürlich jQuery Mobile. Auch hier gibt es eine „minifizierte" und eine normale Version. Es besteht auch die Möglichkeit, sich eine persönliche Version mit ausgewählten Komponenten zusammenzustellen, was dann sinnvoll ist, wenn man die Größe der mobilen Webanwendung optimieren möchte. Nicht benötigte Bestandteile lassen sich hier sehr gut aus dem Framework herausnehmen, dadurch werden die Größe der zu ladenden Frameworkdatei und damit auch die Ladezeit verringert.
Das Framework besteht grundsätzlich aus drei Teilen: einer JavaScript-Datei (jquery.mobile.[Version].js), einem Stylesheet (jquery.mobile.[Version].css) und einem Verzeichnis, das die für die Komponenten benötigten Bilddateien beinhaltet (images). Das komplette Framework lässt sich in Form einer Zip-Datei hier herunterladen: http://jquerymobile.com/
Ebenfalls in dem Archiv enthalten ist ein Verzeichnis mit Demos. Diese beinhalten keinerlei aufbereitete Darstellung des verwendeten Quellcodes, können aber gute Anregungen für die Verwendung der einzelnen Widgets geben. In diesem Buch wird jQuery Mobile in der Version 1.4.1 verwendet.
Projektsetup
Für die in diesem Buch beschriebenen Projekte verwende ich grundlegend immer das gleiche Setup. Da ich in Kapitel 1.4 noch Schritt für Schritt zeigen werde, was ich bei den einzelnen Schritten mache, hier nur ein kurzer Überblick:
Projektanlage in NetBeans als HTML5-Webprojekt
Anlage der Verzeichnisstruktur
Kopieren der Frameworkdateien in das Projekt
1.3 HTML5, CSS und jQuery Mobile
Grundsätzlich gibt es drei Möglichkeiten, wie man Benutzeroberflächen für JavaScript-basierte Webapplikationen aufbauen kann:
Man kann das komplette User Interface (UI) in HTML erstellen und über Stylesheets das Aussehen konfigurieren
Man kann das UI komplett in JavaScript definieren und zur Laufzeit im Browser rendern lassen
Man kann ein Grundgerüst der Applikation in HTML erstellen, und durch bestimmte Parameter im HTML erkennt die JavaScript-Bibliothek bestimmte Widgets (UI-Bestandteile).
Nummer 3 ist die von jQuery Mobile genutzte Variante, die „Progressive Enhancement" genannt wird. Mit Standard-HTML-Tags wird ein Dokument aufgebaut, in dem über data-Attribute in den Tags eine zusätzliche Schicht definiert ist, die das User Interface der mobilen Anwendung definiert. Beispielsweise kann über das Attribut data role den einzelnen Tags eine Rolle bzw. ein Widget zugewiesen werden.
So wird aus einem einfachen Hyperlink durch die Benutzung des data-role-Attributs data-role=button bei voller Unterstützung des Browsers (Klasse A) ein UI-Button mit der Aufschrift „Seite Zwei".
...
#page2 data-role=button
>Seite Zwei
...
Listing 1.1: Hyperlink und Button-Link
Wie dies dann im Browser aussieht, ist in Abbildung 1.2 zu sehen.
Abbildung 1.2: Hyperlink und Button-Link
In der folgenden Tabelle finden sich einige der wichtigsten und gebräuchlichsten data-Attributevon jQuery Mobile und deren Bedeutung.
Tabelle 1.1: Überblick „data"-Attribute
Durch das Progressive Enhancementwird aus dem simplen Quellcode ein angereicherter „enhanced"-Quellcode. Aus unserem Quelltext aus Listing 1.1 wird dann von jQuery Mobile der in Listing 1.2 dargestellte Quelltext. Hier ist schön zu sehen, wie dem Hyperlink verschiedene CSS-Style-Klassen zugewiesen werden, die ihn zum Button machen.
ui-link href=#page2
>Seite Zwei
button class="ui-link ui-btn ui-shadow
ui-corner-all role=
button">Seite Zwei
Listing 1.2: Durch jQuery Mobile angereicherter Quellcode
Der auf diese Weise resultierende HTML5-Quellcode sorgt im Browser dafür, dass ein Button mit Standardeinstellungen angezeigt wird. Im folgenden Kapitel werden wir jetzt unsere erste jQuery-Mobile-App von Grund auf erstellen.
1.4 Hello Mobile
Um unsere erste jQuery-Mobile-App zu erstellen, gehen wir vor, wie bereits in Kapitel 1.2 kurz beschrieben.
Projektsetup
In NetBeans mit File | New Project den New Project Wizard öffnen. Hier unter der Kategorie (Categories) HTML5/ HTML5 Application auswählen. Mit Next > in den nächsten Screen wechseln. Hier einen aussagekräftigen Namen wie z. B. „Hello Mobile" wählen, einen passenden Ort, wo das Projekt angelegt werden soll, auswählen und wiederum mit Finish den Wizard beenden. Das fertige Projekt sollte jetzt aussehen, wie in Abbildung 1.3 dargestellt.
Abbildung 1.3: „Hello Mobile"-Projekt
Als Erstes legen wir nun die Projektstruktur, wie unter Abbildung 1.4 gezeigt, an und kopieren die Frameworkdateien an die angegebenen Stellen.
Abbildung 1.4: Standardprojektstruktur im „Hello Mobile"-Projekt
Unter dem Verzeichnis images befinden sich die für das CSS-Layout von jQuery